<template>
  <a-card :bordered="false">
    <a-form-model ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-tabs :default-active-key="1" :tab-position="tabPosition" v-model="activeKey">
        <a-tab-pane v-for="item in tabTypes" :key="item.key">
          <span slot="tab">
            <img class="tab-img" v-if="item.key == 1" src="~@/assets/u5813.png" />
            <img class="tab-img" v-if="item.key == 2" src="~@/assets/u5806.png" />
            <img class="tab-img" v-if="item.key == 3" src="~@/assets/u5820.png" />
            {{ item.label }}
          </span>
          <!--异常出入岛人群挖掘-->
          <template v-if="activeKey === 1">
            <a-form-model-item :wrapper-col="{ span: 18, offset: 1 }" style="margin-left: 22px;">
              <a-radio-group v-model="trip" button-style="solid">
                <a-radio-button value="inData"> 入岛 </a-radio-button>
                <a-radio-button value="outData"> 出岛 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="进入区域" v-if="trip === 'inData'">
              <a-select mode="multiple" allowClear v-model="formData.inData.areaIds" placeholder="选择区域">
                <a-select-option v-for="item in dictOptions" :key="item.code">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="情报规则" v-if="trip === 'inData'">
              前<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入12小时 </template>
                <a-input class="input" v-model="formData.inData.keyPersonAllocation.beforeHour" type="number"
                  :precision="0" :min="0" :max="12" @input="preInput($event, 'beforeHour', 12)" placeholder="请输入" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              小时岛内无信令位置信息，然后在区域内出现信令，符合以下几种情况：
              <p> 1、手机号码归属地为
                <a-select mode="multiple" allowClear v-model="formData.inData.ascriptionPlaceIds" placeholder="归属地"
                  style="width:298px;">
                  <a-select-option v-for="item in placeOptions" :key="item.areaCode">
                    {{ item.cityName }}
                  </a-select-option>
                </a-select>
              </p>
              <p> 2、近
                <a-input class="input" v-model="formData.inData.keyPersonAllocation.accessSource" type="number"
                  :precision="0" :min="0" :max="12" placeholder="请输入" />
                天有访问指定信源
                <a-select style="width: 63%;" mode="multiple" allowClear v-model="formData.inData.sourceUrlIds"
                  placeholder="选择信源">
                  <a-select-option v-for="item in visitSourceOptions" :key="item.value" :value="item.label">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </p>
              <p> 3、近
                <a-input class="input" v-model="formData.inData.keyPersonAllocation.sendMes" type="number" :precision="0"
                  :min="0" :max="12" placeholder="请输入" />
                天有发送维文dx
              </p>
              <p> 取并集后，排除常住人员</p>
              常住人员定义为
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input class="input" v-model="formData.inData.keyPersonAllocation.residentDefinedDays" type="number"
                  :precision="0" :min="0" :max="30" @input="preInput($event, 'residentDefinedDays', 30)"
                  placeholder="请输入" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              天内出现
              <a-input class="input" v-model="formData.inData.keyPersonAllocation.residentDefinitionTime" type="number"
                :precision="0" :min="0" :max="12" placeholder="请输入" />
              次及以上的人员
            </a-form-model-item>
            <a-form-model-item label="进入区域" v-if="trip === 'outData'">
              <a-select mode="multiple" allowClear v-model="formData.outData.areaIds" placeholder="选择区域">
                <a-select-option v-for="item in dictOptions" :key="item.code">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="情报规则" v-if="trip === 'outData'">
              前<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入24小时 </template>
                <a-input class="input" v-model="formData.outData.keyPersonAllocation.beforeHour" type="number"
                  :precision="0" :min="0" :max="24" @input="preInput($event, 'beforeHour', 24)" placeholder="请输入" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              小时岛内有信令位置信息，然后在区域内出现信令后又无位置信息时长达
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30分钟 </template>
                <a-input class="input" v-model="formData.outData.keyPersonAllocation.locationInfoDuration" type="number"
                  :precision="0" :min="0" :max="30" @input="preInput($event, 'locationInfoDuration', 30)"
                  placeholder="请输入" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              分钟，符合以下几种情况：
              <p>1、手机号码归属地为
                <a-select mode="multiple" allowClear v-model="formData.outData.ascriptionPlaceIds" placeholder="归属地"
                  style="width:298px;">
                  <a-select-option v-for="item in placeOptions" :key="item.areaCode">
                    {{ item.cityName }}
                  </a-select-option>
                </a-select>
              </p>
              <p>2、近 <a-input class="input" v-model="formData.outData.keyPersonAllocation.accessSource" type="number"
                  :precision="0" :min="0" :max="12" placeholder="请输入" />
                天有访问指定信源
                <a-select style="width: 63%;" mode="multiple" allowClear v-model="formData.outData.sourceUrlIds"
                  placeholder="选择区域">
                  <a-select-option v-for="item in visitSourceOptions" :key="item.value" :value="item.label">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </p>
              <p> 3、近
                <a-input class="input" v-model="formData.outData.keyPersonAllocation.sendMes" type="number" :precision="0"
                  :min="0" :max="12" placeholder="请输入" />
                天有发送维文dx
              </p>
              <p> 取并集后，排除常住人员</p>
              常住人员定义为
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input class="input" v-model="formData.outData.keyPersonAllocation.residentDefinedDays" type="number"
                  :precision="0" :min="0" :max="30" @input="preInput($event, 'residentDefinedDays', 30)"
                  placeholder="请输入" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>
              天内出现
              <a-input class="input" v-model="formData.outData.keyPersonAllocation.residentDefinitionTime" type="number"
                :precision="0" :min="0" :max="12" placeholder="请输入" />
              次及以上的人员
            </a-form-model-item>
            <a-form-model-item label="是否开启">
              <a-switch v-model="formData.enabled" checked-children="开" un-checked-children="关" @change="onChange" />
            </a-form-model-item>
          </template>
          <a-form-model-item class="submit-form-model-item" :wrapper-col="noLabelwrapperCol">
            <a-space>
              <a-button type="primary" :loading="btnLoading" :disabled="!formData.enabled" @click="onSubmit">保存</a-button>
            </a-space>
          </a-form-model-item>
        </a-tab-pane>
      </a-tabs>
    </a-form-model>
  </a-card>
</template>
<script>
import * as caseEventApi from '@/api/wxSmuggle/caseEvent.js'
export default {
  components: {},
  data() {
    return {
      labelCol: { span: 2, offset: 1 },
      wrapperCol: { span: 17 },
      noLabelwrapperCol: { span: 19, offset: 1 },
      tabPosition: 'left',
      activeKey: 1,
      tabTypes: [
        { label: '关注人群出入岛', key: 1 },
        // { label: '可疑船舶与人员关联', key: 2 },
        // { label: '消费行为异常人员挖掘', key: 3 }
      ],
      areas: [],
      dictOptions: [],
      placeOptions: [],
      // in入岛，out出岛
      trip: 'inData',
      formData: {
        enabled: false,
        inData: {
          areaIds: [],
          area: [],
          keyPersonAllocation: {
            isAccessIsland: 2, //1:出岛 2:入岛
          },
          ascriptionPlaceIds: [],
          sourceUrl: [],
          sourceUrlIds: []
        },
        outData: {
          areaIds: [],
          area: [],
          keyPersonAllocation: {
            isAccessIsland: 1, //1:出岛 2:入岛
          },
          ascriptionPlaceIds: [],
          sourceUrl: [],
          sourceUrlIds: []
        },
      },
      visitSourceOptions: [
        { value: '1', label: 'Host: appcenter.badambiz.com' },
        { value: '2', label: 'Host: aps.amap.com' },
        { value: '3', label: 'Host: ocsp.digicert.com' },
        { value: '4', label: 'Host: prt.stsdk.vivo.com.cn' },
        { value: '5', label: 'Host: weiyu-ime.qiniudn.com' },
        { value: '6', label: 'Host: api-d.dutils.com' },
        { value: '7', label: 'Host: v2.get.sogou.com' },
        { value: '8', label: 'Host: 116.62.38.180:8090' },
        { value: '10', label: 'Host: puv.tt.browser.360.cn' },
        { value: '12', label: 'Host: pv.sohu.com' },
        { value: '13', label: 'Host: devs-data.dutils.com' },
        { value: '14', label: 'Host: cdn-api-verify.mob.com' },
        { value: '15', label: 'Host: api.verify.mob.com' },
        { value: '16', label: 'Host: 123.6.49.153' },
        { value: '17', label: 'Host: conf.wsm.360.cn' },
        { value: '18', label: 'Host: cdn-sdk-opt.getui.com' },
        { value: '19', label: 'Host: sconf.f.360.cn' },
        { value: '22', label: 'Host: cl.vd.f.360.cn' },
        { value: '23', label: 'Host: res.qhupdate.com' },
        { value: '24', label: 'Host: ocsp.trust-provider.cn' },
        { value: '25', label: 'Host: ocsp.globalsign.com' },
        { value: '26', label: 'Host: 119.29.29.29' },
        { value: '27', label: 'Host: ocsp.godaddy.com' },
        { value: '28', label: 'Host: s.f.360.cn' },
        { value: '29', label: 'Host: s.f.360.cn:443' },
        { value: '30', label: 'Host: 42.236.9.57:443' },
        { value: '31', label: 'Host: 111.7.73.24' },
        { value: '32', label: 'Host: ocsp2.globalsign.com' },
        { value: '33', label: 'Host: ocsp.digicert.cn' },
        { value: '34', label: 'Host: crl.digicert.cn' },
        { value: '35', label: 'Host: 182.254.116.117' },
        { value: '37', label: 'Host: s.safe.360.cn' },
        { value: '38', label: 'Host: sdk.beizi.biz' },
        { value: '39', label: 'Host: m.mpl.dutils.com' },
        { value: '42', label: 'Host: 123.6.49.154' },
        { value: '45', label: 'Host: tools.3g.qq.com' },
        { value: '46', label: 'Host: ulogs.umeng.com' },
        { value: '47', label: 'Host: wifi.vivo.com.cn' },
        { value: '48', label: 'Host: zvod.badambiz.com' },
        { value: '49', label: 'Host: ort.stsdk.vivo.com.cn' },
        { value: '50', label: 'Host: onrt.stsdk.vivo.com.cn' },
        { value: '52', label: 'Host: clients3.google.com' },
        { value: '53', label: 'Host: m.jd.com' },
        { value: '55', label: 'Host: m.qq.com' },
        { value: '59', label: 'Host: self.events.data.microsoft.com' },
        { value: '60', label: 'Host: mpush-api.aliyun.com' },
        { value: '61', label: 'Host: cdnauth1.hpplay.cn' },
        { value: '62', label: 'Host: beacon-api.aliyuncs.com' },
        { value: '63', label: 'Host: kona.alkuyi.com' },
      ],
      btnLoading: false
    }
  },
  mounted() {
    this.getPageListByUnit()
    this.getPlaceOptions()
    this.getDetail()
  },
  methods: {
    // 获取配置详情
    getDetail() {
      caseEventApi.getCryptoDetail().then(res => {
        if (res.success) {
          let arr = res.result
          arr.forEach(item => {
            //1:出岛
            if (item.keyPersonAllocation.isAccessIsland == 1) {
              // 进入区域
              this.formData.outData.areaIds = []
              item.area.forEach(item1 => {
                this.formData.outData.areaIds.push(item1.area.someAreaCode)
              })
              //情报规则
              this.formData.outData.keyPersonAllocation = item.keyPersonAllocation
              //指定信源
              this.formData.outData.sourceUrlIds = []
              item.sourceUrl.forEach(item2 => {
                this.formData.outData.sourceUrlIds.push(item2.url)
              })
              //机号码归属地
              this.formData.outData.ascriptionPlaceIds = []
              this.formData.outData.ascriptionPlaceIds = item.keyPersonAllocation.ascriptionPlace.split(',')
            }
            //2:入岛
            if (item.keyPersonAllocation.isAccessIsland == 2) {
              // 进入区域
              this.formData.inData.areaIds = []
              item.area.forEach(item1 => {
                this.formData.inData.areaIds.push(item1.area.someAreaCode)
              })
              //情报规则
              this.formData.inData.keyPersonAllocation = item.keyPersonAllocation
              if (item.keyPersonAllocation.isOpen == 1) {
                this.formData.enabled = true
              } else {
                this.formData.enabled = false
              }
              //指定信源
              this.formData.inData.sourceUrlIds = []
              item.sourceUrl.forEach(item2 => {
                this.formData.inData.sourceUrlIds.push(item2.url)
              })
              //机号码归属地
              this.formData.inData.ascriptionPlaceIds = []
              this.formData.inData.ascriptionPlaceIds = item.keyPersonAllocation.ascriptionPlace.split(',')
            }
          });
        } else {
          this.$message.warn(res.message)
        }
      })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    onChange(val) {
      console.log(val)
      if (val) {
        caseEventApi.issued().then(res => {
          if (res.success) {
          }
        })
      }
    },
    getData() {
      //入岛
      this.formData.inData.keyPersonAllocation.sendMes = Number(this.formData.inData.keyPersonAllocation.sendMes)
      this.formData.inData.keyPersonAllocation.residentDefinitionTime = Number(this.formData.inData.keyPersonAllocation.residentDefinitionTime)
      this.formData.inData.areaIds.forEach(item => {
        this.dictOptions.forEach(item1 => {
          if (item == item1.code) {
            this.formData.inData.area.push({ id: item, someAreaCode: item, someAreaName: item1.label })
          }
        })
      });
      this.formData.inData.sourceUrlIds.forEach(item1 => {
        this.formData.inData.sourceUrl.push({ url: item1 })
      });
      //归属地
      this.formData.inData.keyPersonAllocation.ascriptionPlace = ""
      this.formData.inData.keyPersonAllocation.ascriptionPlaceName = ""
      // console.log("11111111111")
      // console.log(this.formData.inData.keyPersonAllocation.ascriptionPlaceIds)
      let arr1 = [], arr2 = []
      this.formData.inData.ascriptionPlaceIds.forEach(item => {
        this.placeOptions.forEach(item1 => {
          if (item == item1.areaCode) {
            arr1.push(item)
            arr2.push(item1.cityName)
            this.formData.inData.keyPersonAllocation.ascriptionPlace = arr1.join()
            this.formData.inData.keyPersonAllocation.ascriptionPlaceName = arr2.join()
          }
        })
      });

      //出岛
      this.formData.outData.keyPersonAllocation.sendMes = Number(this.formData.outData.keyPersonAllocation.sendMes)
      this.formData.outData.keyPersonAllocation.residentDefinitionTime = Number(this.formData.outData.keyPersonAllocation.residentDefinitionTime)
      this.formData.outData.areaIds.forEach(item => {
        this.dictOptions.forEach(item1 => {
          if (item == item1.code) {
            this.formData.outData.area.push({ id: item, someAreaCode: item, someAreaName: item1.label })
          }
        })
      });
      this.formData.outData.sourceUrlIds.forEach(item1 => {
        this.formData.outData.sourceUrl.push({ url: item1 })
      });
      //归属地
      this.formData.outData.keyPersonAllocation.ascriptionPlace = ""
      this.formData.outData.keyPersonAllocation.ascriptionPlaceName = ""
      let arr3 = [], arr4 = []
      this.formData.outData.ascriptionPlaceIds.forEach(item => {
        this.placeOptions.forEach(item1 => {
          if (item == item1.areaCode) {
            arr3.push(item)
            arr4.push(item1.cityName)
            this.formData.outData.keyPersonAllocation.ascriptionPlace = arr3.join()
            this.formData.outData.keyPersonAllocation.ascriptionPlaceName = arr4.join()
          }
        })
      });

      //是否开启
      if (this.formData.enabled) {
        this.formData.inData.keyPersonAllocation.isOpen = 1
        this.formData.outData.keyPersonAllocation.isOpen = 1
      } else {
        this.formData.inData.keyPersonAllocation.isOpen = 2
        this.formData.outData.keyPersonAllocation.isOpen = 2
      }
    },
    // 提交保存
    onSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.getData()
          let arr = []
          arr.push(this.formData.inData)
          arr.push(this.formData.outData)
          console.log("111111111")
          console.log(arr)
          this.btnLoading = true
          caseEventApi.digInOutIsland(arr).then(res => {
            if (res.success) {
              this.btnLoading = false
              let message = res.message ? res.message : '操作成功'
              this.$message.success(message)
            } else {
              this.btnLoading = false
              this.$message.warn(res.message)
            }
          })
            .catch(e => {
              this.$message.warn('操作失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取区域列表
    getPageListByUnit() {
      caseEventApi.getPageListByUnit({ state: 1, pageNo: 1, pageSize: 99999 }).then(res => {
        if (res.success) {
          let result = res.result.records
          this.dictOptions = result.map(v => {
            return {
              label: v.name,
              code: v.id + '',
              disabled: v.state == 1 ? false : true
              // type: v.type
            }
          })
        } else {
          this.$message.warn(res.message)
        }
      })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取区域列表
    getPlaceOptions() {
      caseEventApi.getPlace().then(res => {
        this.placeOptions = res
      })
    },
    preInput(e, key, max) {
      // console.log(key, max)
      if (Number(e.target.value) < 1) {
        // this['form' + this.activeKey][this.trip][key] = 0
        this.$set(this.formData[this.trip].keyPersonAllocation, key, 0)
      } else if (Number(e.target.value) > max) {
        this.$set(this.formData[this.trip].keyPersonAllocation, key, max)
        // this['form' + this.activeKey][this.trip][key] = max
      } else {
        console.log(e.target.value)
        let value = e.target.value.replace(/\D+/, '')
        if (value > max) {
          // console.log("44444444")
          // console.log(this.formData[this.trip].keyPersonAllocation)
          // console.log(key)
          this.$set(this.formData[this.trip].keyPersonAllocation, key, Number(max))
          // this.formData[this.trip].keyPersonAllocation[key] = Number(max)
        } else {
          // console.log("33333")
          // console.log(this.formData[this.trip].keyPersonAllocation)
          // console.log(key)
          this.$set(this.formData[this.trip].keyPersonAllocation, key, Number(value))
          // this.formData[this.trip].keyPersonAllocation[key] = Number(value)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  width: 90px;
  margin: 0 6px;

  &.time {
    width: 110px;
  }
}

.select {
  width: 120px;
  margin: 0 10px;

  &.area {
    width: 200px;
  }
}

/deep/.ant-tabs {
  .ant-tabs-content {
    min-height: 550px;
  }

  .submit-form-model-item {
    margin-top: 100px;

    .ant-form-item-control {
      text-align: left;
      margin-left: 30px;
    }
  }
}

/deep/.numeric-input .ant-tooltip-inner {
  min-width: 32px;
  min-height: 37px;
}

/deep/.numeric-input .numeric-input-title {
  font-size: 14px;
}

/deep/.ant-tabs-tab {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  // padding-left: 0 !important;
  margin-bottom: 6px !important;
  text-align: left !important;

  .tab-img {
    border: 1px rgb(166, 222, 214) solid;
    border-radius: 50%;
    padding: 10px;
    margin-right: 10px;
  }

  &.ant-tabs-tab-active {
    background-color: #eef7ff;
  }
}
</style>
